import React, { Component } from 'react';
import { Button, NavBar, Radio } from 'antd-mobile';
import { EditSOutline } from 'antd-mobile-icons'
import service from '../../api'
import { connect } from 'react-redux'
import './Address_list.scss'
import { store } from '../../store';
class Address_List extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            addresslist: []
        }
    }
    componentDidMount(): void {
        console.log(this.props.location.state)
        var userid = localStorage.getItem('userid')
        service.address.getAddressList({ userid }).then(res => {
            console.log(res)
            if (res.data.code === '200') {
                this.setState({
                    addresslist: res.data.data
                })
            }
        })
    }
    onChange(addressid: any) {
        console.log(addressid)
        this.props.change(addressid)
        var address = this.state.addresslist.find((item: any) => item.addressid === addressid)
        store.dispatch({
            type: 'CHANGEADDRESS',
            data: address
        })
    }
    back() {
        if(this.props.location.state&&this.props.location.state.time){
            this.props.history.replace('/order/'+this.props.location.state.time)
        }
        else{
            this.props.history.replace('/index/cart')
        }
        
    }
    toAddressadd() {
        if(this.props.location.state){
            this.props.history.push({ pathname: '/addressadd', state: { time:this.props.location.state.time } })
        }
        else{
            this.props.history.push('/addressadd')
        }
       
    }
    toEdit(addressid: string) {
        if(this.props.location.state){
            this.props.history.push({ pathname: '/addressedit', state: {addressid, time:this.props.location.state.time } })
        }
        else{
            this.props.history.push({pathname:'/addressedit',state:{addressid}})
        }
        var address = this.state.addresslist.find((item: any) => item.addressid === addressid)
        var area = address.province + '/' + address.city + '/' + address.county
        store.dispatch({
            type: 'CHANGEADDRESS',
            data: address
        })
        store.dispatch({
            type: 'CHANGEAREA',
            data: area
        })
    }
    render() {
        return (
            <div className='address_list'>
                <header>
                    <NavBar onBack={() => { this.back() }}>地址列表</NavBar>
                </header>
                <main>
                    {
                        this.state.addresslist.length == 0 ?
                            <>
                                <p>当前地址列表为空，请添加地址</p>

                                <Button shape='rounded' color='primary' onClick={this.toAddressadd.bind(this)} >新增地址</Button>
                            </> :
                            <>
                                <div>
                                    <Radio.Group defaultValue={this.props.addressid} onChange={(val) => { this.onChange(val) }}>
                                        {
                                            this.state.addresslist.map((item: any, index: number) => {
                                                return (
                                                    <Radio value={item.addressid} key={item.addressid}>
                                                        <div className='address'>
                                                            <h4>{item.name} <span>{item.tel}</span></h4>
                                                            <p>{item.province + item.city + item.county} <span>{item.addressDetail}</span></p>
                                                        </div>
                                                        <EditSOutline onClick={() => { this.toEdit(item.addressid) }} />
                                                    </Radio>
                                                )
                                            })
                                        }

                                    </Radio.Group>
                                </div>
                           <Button shape='rounded' color='primary' onClick={this.toAddressadd.bind(this)} >新增地址</Button>
                     </>
                    }
                </main>
            </div>
        );
    }
}

export default connect(
    (state: any) => {
        return {
            addressid: state.addressid,
        }
    },
    (dispatch: any) => {
        return {
            change: function (data: string) {
                dispatch({
                    type: 'CHANGE',
                    data
                })
            }
        }
    }
)(Address_List);